<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始化&局部滚动&dialog</title>
    <script src="js/tv-focusable.js"></script>
    <style>
        .demo {
            text-align: center;
            margin: 100px auto;
            display: flex;
            flex-direction: row;
        }

        .content {
            height: 600px;
            flex:0 0 1000px;
            overflow: auto;
            background-color: bisque;
        }

        .content .item {
            width: 300px;
            height: 100px;
            line-height: 100px;
            margin: 10px;
            display: inline-block;
            background-color: #2c3e50;
            box-sizing: border-box;
            vertical-align: top;
            color: #ffffff;
        }

        .menu {
            flex: 0 0 300px;
            width: 300px;
            height: 600px;
            overflow: hidden;
            padding: 20px;
        }

        .menu .m-item {
            width: 200px;
            height: 100px;
            line-height: 100px;
            box-sizing: border-box;
            display: inline-block;
            background-color: #cccccc;
            margin-bottom: 10px;
        }

        .focus {
            transform: scale(1.1);
            border: 2px solid red;
            box-shadow: 0 0 20px red;
        }
    </style>
</head>

<body>
    <div class="demo">
        <div class="menu">
            <div class="m-item" focusable>1</div>
            <div class="m-item" focusable>2</div>
            <div class="m-item" focusable>3</div>
            <div class="m-item" focusable>4</div>
            <div class="m-item" focusable>5</div>
            <div class="m-item" focusable>6</div>
            <div class="m-item" focusable>7</div>
            <div class="m-item" focusable>8</div>
            <div class="m-item" focusable>9</div>
        </div>
        <div class="content">

        </div>
    </div>

</body>

</html>
<script>
    tvCore.requestFocus(tvCore.getElementByPath('//div[@class="menu"]/div[1]'))

    var currentMenu = 1;
    var contentCount = 30;
    var menuCount = 9

    function menuFocus(i) {//切换滚动元素到menu
        currentMenu = i;
        tvCore.setScrollEl(tvCore.getElementByPath("//div[@class='menu']"))
        contentHtml()
    }
    function contentFocus() {//切换滚动元素到内容
        tvCore.setScrollEl(tvCore.getElementByPath("//div[@class='content']"))
    }

    //////////边界处理（根据具体需求来）///////////////
    function menuUp(i, event) {//在第一个menu按上，焦点不动
        if (i == 1) {
            tvCore.requestFocus(event.target);
        }
    }
    function menuDown(i, event) {//在最下面一个menu按下，焦点不动，避免右边内容item自动聚焦
        if (i == menuCount) {
            tvCore.requestFocus(event.target);
        }
    }
    function menuRight() { //从menu到内容时固定到内容的第一个元素
        tvCore.requestFocus(tvCore.getElementByPath("//div[@class='content']/div[1]"), false);
    }

    function contentDown(index, event) {
        if (contentCount - index < 3) {//如果是最后一行的内容,按下焦点不许动
            tvCore.requestFocus(event.target);
        }
    }

    function contentLeft(i) {
        if (i % 3 == 1) {//在第一列的内容上按左时，让当前menu的item聚焦
            console.log(currentMenu);
            tvCore.requestFocus(tvCore.getElementByPath(`//div[@class='menu']/div[${currentMenu}]`), false);
        }
    }
    function contentUp(index, event) {
        if (index <= 3) {
            tvCore.requestFocus(event.target);
        }
    }
    //////////边界处理结束///////////////

    function setMenuListener() {
        document.querySelectorAll('.m-item').forEach((item, i) => {
            item.addEventListener('onFocus', function () { menuFocus(i + 1) });
            item.addEventListener('up', function (e) { menuUp(i + 1, e) });
            item.addEventListener('down', function (e) { menuDown(i + 1, e) });
            item.addEventListener('right', menuRight);
        });
    }
    setMenuListener()

    var colors = ['#FFCCCC', '#FF9966', '#99CC99']
    function createContent(i) {
        var $div = document.createElement('div');
        $div.style.backgroundColor = colors[currentMenu % 3];
        $div.setAttribute('class', 'item');
        $div.setAttribute('focusable', '');
        $div.addEventListener('onFocus', contentFocus);
        $div.addEventListener('up', function (e) { contentUp(i + 1, e) });
        $div.addEventListener('down', function (e) { contentDown(i + 1, e) });
        $div.addEventListener('left', function () { contentLeft(i + 1) });
        $div.innerHTML = `${currentMenu}-${i + 1}`;
        document.querySelector('.content').appendChild($div)
    }
    function contentHtml() {
        document.querySelector('.content').innerHTML = ''
        for (var i = 0; i < contentCount; i++) {
            createContent(i)
        }
    }
    contentHtml()
</script>
